<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

<div id="app">
    <div 
    v-bind:class="{active: isActive, green: isGreen}"
    style="width:600px;height:200px;text-align:center;line-height:200px;"
    >
        v-bind指令可以设置是否绑定某个css样式,可以多个绑定
    </div>

    <div 
    v-bind:class="[ isActive ? 'active':'', isGreen ? 'green':'' ]"
    style="width:600px;height:200px;text-align:center;line-height:200px;"
    >
    v-bind指令可以使用数组+3元预算符动态绑定数据
    </div>

    <div
    :style="{color: color, fontSize: fontSize, background: isRed ? '#FF0000' : '' }">
        :style是vue的动态绑定
    </div>

</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActive: true,
            isGreen:  true,
            color: "#000000",
            fontSize: '50px',
            isRed: true
        }
    })
</script>

<style>
    .active{background-color: #FF0000;}
    .green{color:#00FF00;}
</style>